<template>
	<div v-title data-title="体育">
		<NavTop></NavTop>
		<el-main style="margin-top: 60px;">
			<el-row>
			  <el-col :span="24"><div class="grid-content bg-purple-dark">
			    <div class="news-head">
			      <img class="news-post" src="@/assets/logo.png" width="40px" height="40px" />
			      <span class="news-author">与时网</span>
			      <span class="news-time"><i class="el-icon-date"></i> 发布时间: 2021-11-18</span>
			      <el-divider></el-divider>
			    </div>
			  </div></el-col>
			</el-row>
			<el-row>
			  <el-col :span="12">
				  <div class="grid-content bg-purple">
			    <img class="physical" src="@/assets/images/p4.jpg" height="180px" width="220px"/>
			    <img class="physical" src="@/assets/images/p5.jpg" height="180px" width="220px"/>
			    <img class="physical" src="@/assets/images/p6.jpg" height="180px" width="220px"/>
			    <div class="news" v-for="news in newsData.slice(64,65)">
			    	<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
			    		<h1>{{news.title}}</h1>
			    		<br>
			    	</router-link>
			    </div>
			  </div>
			  </el-col>
			  <el-col :span="12">
				  <div class="grid-content bg-purple-light">
			    <img class="physical" src="@/assets/images/p7.jpg" height="180px" width="220px"/>
			    <img class="physical" src="@/assets/images/p8.jpg" height="180px" width="220px"/>
			    <img class="physical" src="@/assets/images/p9.jpg" height="180px" width="220px"/>
			  <div class="news" v-for="news in newsData.slice(29,30)">
			  	<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
			  		<h1>{{news.title}}</h1>
			  		<br>
			  	</router-link>
			  </div>
			  </div>
			  </el-col>
			</el-row>
			
		<el-row>
			<el-card class="carousel" style="margin: 0 auto; width: 1200px;">
			    <el-carousel :interval="4000" type="card" height="330px">
			      <el-carousel-item >
			        <img class="medium" src="@/assets/images/p1.jpg">
			      </el-carousel-item>
			      <el-carousel-item >
			        <img class="medium" src="@/assets/images/p2.jpg" >
			      </el-carousel-item>
			      <el-carousel-item >
			        <img class="medium" src="@/assets/images/p3.jpg">
			      </el-carousel-item>
			    </el-carousel>
			</el-card>
		</el-row>
		
		<el-row>
		  <el-col :span="6">
			  <div class="grid-content bg-purple">
		      <img class="physical" src="@/assets/images/p10.jpg" height="250px" width="360px"/>
		      <div class="news" v-for="news in newsData.slice(30,32)">
		      	<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
		      		<h3>{{news.title}}</h3>
		      		<br>
		      	</router-link>
		      </div>
		      </div>
		  </el-col>
		  <el-col :span="6">
			  <div class="grid-content bg-purple-light">
		     <img class="physical" src="@/assets/images/p11.jpg" height="250px" width="360px"/>
		    <div class="news" v-for="news in newsData.slice(65,67)">
		    	<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
		    		<h3>{{news.title}}</h3>
		    		<br>
		    	</router-link>
		    </div>
		      </div>
		  </el-col>
		  <el-col :span="6">
			  <div class="grid-content bg-purple">
		      <img class="physical" src="@/assets/images/p14.jpg" height="250px" width="360px"/>
		      <div class="news" v-for="news in newsData.slice(67,69)">
		      	<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
		      		<h3>{{news.title}}</h3>
		      		<br>
		      	</router-link>
		      </div>
		      </div>
		  </el-col>
		  <el-col :span="6">
			  <div class="grid-content bg-purple-light">
		       <img class="physical" src="@/assets/images/p13.png" height="250px" width="360px"/>
		       <div class="news" v-for="news in newsData.slice(60,62)">
		       	<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
		       		<h3>{{news.title}}</h3>
		       		<br>
		       	</router-link>
		       </div>
		       </div>
		  </el-col>
		</el-row>
		
		<el-row>
			<el-col :span="4">
					  <div class="grid-content bg-purple">
			  <el-card v-for="news in newsData.slice(32,35)">
				  <router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
					<h3>{{news.title}}</h3>
				  </router-link>
			  </el-card> 
					 </div>
			</el-col>
			<el-col :span="4">
					  <div class="grid-content bg-purple">
			   <el-card v-for="news in newsData.slice(41,44)">
				  <router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
					<h3>{{news.title}}</h3>
				  </router-link>
			   </el-card> 
					 </div>
			</el-col>
			<el-col :span="4">
					  <div class="grid-content bg-purple">
			   <el-card v-for="news in newsData.slice(67,70)">
			   				  <router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
			   					<h3>{{news.title}}</h3>
			   				  </router-link>
			   </el-card> 
					 </div>
			</el-col>
			<el-col :span="4">
					  <div class="grid-content bg-purple">
			  <el-card v-for="news in newsData.slice(33,36)">
			  				  <router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
			  					<h3>{{news.title}}</h3>
			  				  </router-link>
			  </el-card> 
					 </div>
			</el-col>
			<el-col :span="4">
					  <div class="grid-content bg-purple">
			  <el-card v-for="news in newsData.slice(68,71)">
			  				  <router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
			  					<h3>{{news.title}}</h3>
			  				  </router-link>
			  </el-card> 
					 </div>
			</el-col>
			<el-col :span="4">
					  <div class="grid-content bg-purple">
			  <el-card v-for="news in newsData.slice(43,46)">
			  				  <router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
			  					<h3>{{news.title}}</h3>
			  				  </router-link>
			  </el-card> 
					 </div>
			</el-col>
		</el-row>
		
			<el-row>
				<el-col :span="24">
					<div class="grid-content bg-purple-dark">
						<h1 class="h1-height">体育</h1>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="news in newsData.slice(60,67)">
								<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
									<h4>{{news.title}}</h4>
									<br>
								</router-link>
							</div>		
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="news in newsData.slice(67,74)">
								<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
									<h4>{{news.title}}</h4>
									<br>
								</router-link>
							</div>		
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="news in newsData.slice(74,81)">
								<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
									<h4>{{news.title}}</h4>
									<br>
								</router-link>
							</div>			
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="news in newsData.slice(56,63)">
								<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
									<h4>{{news.title}}</h4>
									<br>
								</router-link>
							</div>		
						</el-card>
					</div>
				</el-col>
			</el-row>
			
		</el-main>
		<Footer></Footer>
	</div>
</template>

<script>
	import NavTop from "@/components/NavTop"
	import Footer from "@/components/Footer"
	export default{
		name: 'Sports',
		components: {
			NavTop,
			Footer
		},
		data() {
			return {
				
				//新闻内容
				newsData:{
					
				},
		
			}
		
		},
		methods: {
			getNews(){
				this.$axios.get('/newsList').then(res => {
					this.newsData = res.data.data
				})
				
			},
		},
		created() {
			this.getNews()
		}
	}
</script>

<style>
	
</style>
